<template>
  <div>
    <div class="detail-header">
      <h3 style="color:#1990FE ">
        {{ workPointInfo.name }}
      </h3>
    </div>
    <div style="  padding: 15px 15px 15px 15px;display: flex;align-items: center;justify-content: space-between">
      <el-select v-model="value" placeholder="请选择" @change="changeMonitorList">
        <el-option
          v-for="item in options"
          :key="item.monitorType"
          :label="item.monitorTypeName"
          :value="item.monitorType">
        </el-option>
      </el-select>
      <!-- 按钮列表 -->
      <div class="opera_btn">
        <el-button
          :style="item.id ===activeId?'background-color: #04a7b3;':''"
          type="primary"
          size="small"
          :plain="item.id !== activeId"
          v-for="item in monitorList"
          @click="changeActiveId(item.id)"
          :key="item.id">
          {{item.name}}
        </el-button>

      </div>
    </div>
    <component
      :is="activeModule"
      :monitorInfo="monitorInfo"
      ref="component1"
      :typeOneUmumList="typeOneUmumList"
      @update="queryMonitorInfo"
      @export="exportData"
      :compareTypes="compareType"
      :compareVal.sync="searchParams.compareVal"
      :compareType.sync="searchParams.compareType"
      :enumSurfaceCalcTypeList.sync="EnumSurfaceCalcTypeList"
      :surfaceCalcType.sync="searchParams.calcType"
      :calcType.sync="searchParams.calcType"
      :calcVal.sync="searchParams.calcVal"
      :startTimer.sync="searchParams.startCreateTime"
      :endTimer.sync="searchParams.endCreateTime"></component>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>

<script>
  import {
    getDictData,
  } from '@/services/model/common'
  import {
    searchRecord, queryPointRule, relationTypeList, downloadRecord,getCalcTypeList
  } from "@/services/model/open_iframe.js";
  import {actions} from "../../monitor/work-point.store";
  import XLoading from '@/components/animation/x-loading.vue'
  export default {
    components:{XLoading},
    data() {
      return {
        isLoading:false,
        compareType: [],
        monitorInfo: {},
        EnumSurfaceCalcTypeList: [],
        // 列表查询参数
        searchParams: {
          // compareType: 3,
          // calcType: 1,
          // EnumSurfaceCalcType: 0,
        },
        activeModule: null,
        value: null,
        // 深部位移枚举
        typeOneUmumList: [],
        options: [],
        monitorList: [],
        activeId: '',
        workPointInfo: {}
      };

    },
    computed: {
      //业主单位
      isOwner() {
        //业主单位的type为5
        return this.$store.state.userInfo.unitType === 5
      },
      // 当前所有的监测点列表
      // monitorList() {
      //   // 当前的用户类型
      //   const {type, workPointId} = this.$route.params
      //   const monitorList = store.workPoint_MonitorList.find(x => x.id === workPointId)?.children || []
      //   const typeList = monitorList.find(x => x.monitorType === Number(type))?.brother || []
      //   return typeList
      // },
    },
    methods: {
      changeActiveId(val){
        this.activeId=val;
        this.$forceUpdate()
        this.queryWorkPoint({first: true});
      },
      // 查询工点既监测点信息
      async queryWorkPoint({first, switchMonitor} = {}) {
        // 初始化参数
        let initParams = {}
        // 当前的用户类型
        const type = this.value
        // 如果是深部位移，则需要同时查询出枚举来
        if (Number(type) === 1) {
          await Promise.all([this.queryEmum()])
          initParams = {
            calcType: this.typeOneUmumList[1].code, // 	深部位移-筛选类型code
            calcVal: this.typeOneUmumList[0]?.relationTypeList[1]?.code,
          }
        } else {
          // await actions.queryWorkPointList(this.$route.params.projectId)
        }

        if (first) {
          // 判断切换监测点
          if (!switchMonitor) {
            // const {activeId} = this.$route.query
            // this.activeId = activeId || this.monitorList[0]?.id
          }
          if (!this.activeId) {
            return
          }
          let monitorInfo = this.monitorList.find(x => x.id == this.activeId)
          this.monitorInfo = monitorInfo
          if (Number(type) === 2) {
            await this.getCalcTypeList(this.monitorInfo.bindEquipId)
            let index = this.EnumSurfaceCalcTypeList.length - 1
            let code = this.EnumSurfaceCalcTypeList[index].code
            initParams = {
              calcType: code,
            }
          }else if (Number(type) === 17) {
            initParams = {
              calcType: 1,
            }
          }else if (Number(type) === 13) {
            initParams = {
              calcType: this.searchParams.calcType,
            }
          }
          // 默认30天数据
          const timer = 30 * 24 * 3600 * 1000
          // 结束时间加1s
          let endTime = this.monitorInfo.collectionTime + 1000
          let startTime = this.monitorInfo.collectionTime - timer
          if (monitorInfo) {
            this.searchParams = {
              ...initParams,
              monitorType: Number(type),
              endCreateTime: endTime,
              startCreateTime: startTime,
              compareType: 0,
            }
          }
          this.queryMonitorInfo()
        }

        // this.connectSocket(this.activeId)
      },
      //解算类型
      async getCalcTypeList(equipId) {
        let res = await getCalcTypeList({
          equipId: equipId
        })
        this.EnumSurfaceCalcTypeList = res.data || []

      },
      async queryDictData() {
        const {data} = await getDictData({enumName: 'EnumCompareType'})
        this.compareType = data || []
      },
      //导出数据
      async exportData() {
        this.isLoading = true
        await downloadRecord({...this.searchParams, pointId: this.activeId});
        this.isLoading = false
      },
      // 深部位移枚举
      async queryEmum() {
        const {data} = await relationTypeList()
        this.typeOneUmumList = data
      },

      //monitorType修改后，右侧按钮修改
      changeMonitorList() {
        this.workPointInfo.monitorGroupList.map(x => {
          if (this.value == x.monitorType) {
            this.monitorList = x.monitorPointList
            this.activeId = x.monitorPointList[0].id
          }
        })
        this.searchParams.monitorType = this.value
        this.$nextTick(()=>{
          this.changeEcharts()
        })

      },
      //  从父组件获取数据
      getOptionsList(val) {
        this.options = val.monitorGroupList
        this.workPointInfo = val
        this.value = this.options[0].monitorType
        this.$nextTick(()=>{
          this.changeEcharts()
        })
        this.changeMonitorList()
      },
      // 设置预警值
      async setWarningLine() {
        let {data} = await queryPointRule({pointId: this.activeId})
        if (data && data.length) {
          this.$refs.component1.setWarningLine(data)
        }
      },
      //   修改动态接入组件
      changeEcharts() {
        if (this.value) this.activeModule = resolve => require([`./monitor-item/item-${this.value}.vue`], resolve)
        else this.activeModule = () => import('./monitor-item/empty')
        // this.queryWorkPoint({first: true})

        // this.queryMonitorInfo()
      },
      // 查询监测点信息
      async queryMonitorInfo(id) {
        if (id) {
          this.activeId = id
          this.queryWorkPoint({first: true, switchMonitor: true})
          return
        }
        // 查询采集数据
        this.isLoading = true
        if (this.isOwner) {
          // 业主单位只能查询两小时以前的数据
          const timer = 2 * 3600 * 1000
          // 结束时间加1s
          this.searchParams.endCreateTime = this.searchParams.endCreateTime - timer
          this.searchParams.startCreateTime = this.searchParams.startCreateTime - timer
        }
        try {

          let two = await searchRecord({...this.searchParams, pointId: this.activeId})

          this.$refs.component1.update({
            data: two.data || {},
            holeDepth: this.monitorInfo.holeDepth,
            monitorName: this.monitorInfo.name,
            monitorInfo: this.monitorInfo,
            activeId: this.activeId
          })
          this.setWarningLine()
          this.isLoading = false
          // this.setRouteQuery(this.activeId)
        } catch (error) {
          this.isLoading = false
        } finally {
        }
        this.disabled = false
      },
    },
    created() {


    },
    activated() {
      this.$nextTick(()=>{
        this.queryWorkPoint({first: true});
      })
    },
    mounted() {
      this.queryDictData()

    },

  };
</script>

<style lang="less" scoped>
  .exportDown {
    width: 100vw;
    height: 100vh;

    overflow: hidden;
  }

  .exportBg {
    width: 98%;
    height: 100%;
    margin: auto;
    margin-top: 10px;
    box-shadow: 0px 0px 8px black;

    .box-card {
      width: 100%;
      min-height: 270px;
      color: white;
      overflow: hidden;

      .firstLevel {
        margin: auto;
        margin-top: 20px;
        width: 90%;
        height: 160px;

        /deep/ .el-tabs__item {
          color: black;
          width: 50%;
          text-align: center;
          box-sizing: border-box;
          font-size: 16px;
        }

        /deep/ .el-tabs__item.is-active {
          color: white;
          background-color: #1990FE;
          font-size: 140%;
          box-sizing: border-box;
        }


        /deep/ .el-tabs__active-bar {
          background-color: #1990FE !important;
        }
      }

      .footLevel {
        width: 100%;
        height: 50px;
        // background: red;
        position: relative;

        /deep/ .el-button {
          background: #1990FE;
          color: white;
          border: none;
          position: absolute;
          bottom: 0;
          right: 10%;
        }

        // 修改弹窗
      }
    }
  }

  .downloadBg {
    margin: auto;
    margin-top: 20px;
    width: 80%;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0px 0px 8px black;

    /deep/ .el-table {
      margin: auto;
      margin-top: 20px !important;
    }

    /deep/ .el-button {
      background: #1990FE;
      color: white;
    }

    .el-pagination {
      margin: auto;
      margin-top: 20px;
      width: 80%;
    }
  }

  // 修改下拉菜单 宽度
  /deep/ .el-cascader {
    margin: auto;
    position: relative;
    width: 100%;

    .el-input {
      margin-right: 20px;
    }
  }

</style>


<style lang="less">

  .el-message-box__header {
    background: #1990FE !important;

    span {
      color: white;
      font-size: 22px;
    }

  }

  .el-message-box {
    // background: yellow !important;
  }

  .el-message-box__headerbtn .el-message-box__close {
    color: white;
  }

  .el-message-box__message {
    margin-top: 20px;
    color: #1990FE;
    font-size: 20px;
  }

  .el-message-box__btns {

  }

  // background: #1990FE;


</style>
